Navigation rail Guidelines 導航軌道指導規則

Usage 用法

導航軌道是一個位於螢幕側邊的選單，包含3-7個應用功能入口，也可以新增一個浮動按鈕。每個入口都有圖示和文字說明，其中一個入口會一直保持選中狀態。

根據螢幕大小，我們會使用不同的導航方式：小螢幕用導航欄，中等螢幕及以上用導航軌道，大螢幕則可以選擇用導航軌道或者抽屜式導航選單。

導航欄可以放置3-7個功能按鈕，每個按鈕都包含一個圖示和文字說明。你也可以新增一個浮動操作按鈕（FAB）。在大螢幕上，這個導航欄可以單獨用來完成所有導航功能。

導航欄使用場景：

適合用在需要頻繁訪問的主要功能上。這些功能應該是：

整個應用中最重要的3-7個功能入口

適合在平板和電腦上顯示

不建議使用導航欄的情況：

手機等小螢幕裝置

簡單功能（比如只是看郵件）

次要的導航選項

導航欄用於應用中需要在任何位置都可訪問的頂級目標，在平板電腦或桌面佈局中，導航欄包含3到7個主要目標

Anatomy結構

1 Container2 Menu (optional)3 Floating action button (optional)4 Icon - active5 Active indicator6 Label text- active7 Icon -inactive8 Large badge9 Large badge label (optional)10 Small badge11 Label text-inactive

Container 容器

導航欄會根據語言的書寫方向自動放置：如果是從左到右書寫的語言（如中文、英文），導航欄就在螢幕左側；如果是從右到左書寫的語言（如阿拉伯文），導航欄就在螢幕右側。

導航欄要垂直放在螢幕邊緣。如果是小螢幕裝置，建議使用水平的底部導航欄。在同一個頁面中相關的功能區域之間導航時，可以把標籤和導航欄搭配使用，這樣會讓導航更加清晰連貫。

× 不要把導航欄水平放置

導航欄目的地可以作為一個組在佈局的頂部、底部或中心對齊。在平板電腦上，底部對齊可以使使用者更容易用拇指觸及目的地。選單和 FAB 應始終與導航欄的頂部對齊。

頂部，中部和底部對齊的側邊欄目的地放置

Menu (optional) 選單（可選）

導航欄還可以包含一個選單圖示以開啟導航抽屜。

Floating action button (FAB) (optional)浮動操作按鈕（FAB）（可選）

側邊欄為將 FAB 固定在螢幕頂部提供了一個方便的容器，將應用程式的關鍵操作置於導航目的地之上。當巢狀在另一個元件（如導航側邊欄）內時，FAB 的靜止高度處於 0 級。

checkDo 做
A top-aligned FAB in the navigation rail

懸浮操作按鈕(FAB)應放在導航欄的頂部

不要把懸浮按鈕放在導航選項的下面，這樣會影響使用

軌道頂部還可以用於放置標誌。

當logo放在頂部時，要注意視覺上與圖示進行區分

Active indicator 活動指示器

活動指示器是一個背景形狀，用於傳達當前正在顯示的導航欄的目標位置。

✓ 指示器是唯一的

× 避免出現多個焦點指示器

Icons 圖示

導航欄目的地始終由象徵目的地內容或性質的圖示表示。

✓ 對目標使用主色或高強調選中顏色

× 避免不同色彩與對比度低的情況出現

closeDon’t 不要Don’t use more than two colors for destinations or low-contrast colors in the navigation rail. This will make distinguishing active items more difficult.

Label text 標籤文字

標籤文字提供對導航目標的簡短而有意義的描述，以及讓使用者理解圖示含義的另一種方式。

✓ 簡單的標籤描述目標

× 標籤應足夠短，以免被截斷。此外，不應為了適應較長的文字標籤而縮小字號比例。

× 為了容納更多字元而減小字型大小

× 應該始終顯示標籤。標籤文字對於可用性和可訪問性很重要。

Badges 徽章

導航欄圖示可以在其右上角包含徽標。徽標傳達有關關聯目標的動態資訊，例如計數或狀態。

1 導航軌道目的地上的小徽章 2 帶數字的大徽章 3 帶最大字元數的大徽章

Divider (optional) 分隔線（可選）

用豎直分隔線可以清楚地區分導航軌道和其他內容。這條分隔線要放在導航軌道的邊緣，就是靠近主要內容區域的那一側。

分割器可以是導航欄與其他內容區分開來

Placement 放置位置

With a navigation drawer 帶有導航抽屜

導航欄可以顯示3到7個主要功能入口。如果需要更多功能選項，可以新增一個選單按鈕 - 點選它會開啟一個抽屜式選單，顯示次要功能和其他選項。

如果有一些功能不適合放在導航軌道里，你可以搭配使用一個彈出式導航選單來顯示這些功能

× 不要在同一螢幕使用導航欄與底部導航欄

× 不要同時顯示導航欄和標準導航抽屜

Responsive layout 響應式佈局

在小螢幕顯示時，導航欄會自動變成底部導航條，這樣更容易操作。重要提示：不要在同一個介面同時使用導航欄和導航條。

左側：在較小的裝置上使用導航欄。右側：在較大的顯示屏上改用導航軌道。

Density 密度

對於緊湊佈局，可以減小預設容器的寬度。

導航預設寬度

可以縮小預設寬度

Behavior 行為

Scrolling 滾動

導航欄中的目的地在垂直滾動時應保持可見。

軌道目的地保持固定，而螢幕內容垂直滾動

當頁面可以水平滾動時，導航軌道有兩種顯示方式：它可以隨著內容一起滾動消失，或者固定在原位。如果希望讓使用者清楚地看到內容是在導航軌道下方滾動，可以新增一條分隔線，或者給導航軌道新增陰影效果。

分割線在軌道和水平滾動內容之間建立視覺分割槽

將軌道提升至第一層，可在軌道和水平滾動內容之間形成視覺區分

play_arrowRail destinations remain fixed while on-screen content scrolls vertically

Selection 選擇

點選一個目標時，目標螢幕使用頂層過渡模式。圖示將被填充，並且活動指示器從圖示的中心擴充套件。

Back 返回

在安卓系統中，有一種名為預測性返回的手勢，允許使用者在導航欄上向左或向右滑動。上一個螢幕會以預覽的形式顯示，以表明目的地。

釋放以確認，滑動以提交

Interaction & style 互動與樣式

Touch 觸控

當點選導航項時，活動指示器會出現在適當位置，提供其已被選中的反饋

觸控漣漪透過指示器傳遞

圖示從線框變為填充

圖示顏色發生變化，變得更暗了

Cursor 游標

當滑鼠懸停時，會出現懸停狀態，提供該目標可互動的視覺提示

當被點選時（在活動和非活動狀態下），會有一個漣漪穿過活動指示器

圖示從線框變為填充，圖示顏色發生變化，變得更暗了

Visual indicators 視覺指示符

選中狀態實心圖示和加粗文字，未選中狀態線性+標準文字，活動指示器位於圖示後面